<template>
  <div>
    <h2>用户权限介绍</h2>
    <div class="row">
      <div class="col-md-3">
        <div class="card">
          <div class="card-header">超市用户</div>
          <div class="card-body">
            <p>1. 可以查看商品信息及价格</p>
            <p>2. 可以下订单</p>
            <p>3. 可以查看订单状态</p>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card">
          <div class="card-header">运输商</div>
          <div class="card-body">
            <p>1. 可以查看运输路线及时间</p>
            <p>2. 可以查看订单状态</p>
            <p>3. 可以更新订单状态</p>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card">
          <div class="card-header">农场</div>
          <div class="card-body">
            <p>1. 可以查看种植情况及采摘时间</p>
            <p>2. 可以更新采摘时间</p>
            <p>3. 可以查看订单信息</p>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card">
          <div class="card-header">工厂</div>
          <div class="card-body">
            <p>1. 可以查看生产流程及进度</p>
            <p>2. 可以更新生产进度</p>
            <p>3. 可以查看订单信息</p>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card">
          <div class="card-header">超级管理员</div>
          <div class="card-body">
            <p>1. 可以管理所有用户的信息及权限</p>
            <p>2. 可以查看所有订单的信息及状态</p>
            <p>3. 可以更新订单状态</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserPresentation'
}
</script>

<style>
.row {
  margin-top: 20px;
}
.card {
  margin-bottom: 20px;
}
.card-header {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.card-body {
  font-size: 18px;
}
</style>
